<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20210105</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="js/jquery1.9/jquery-1.9.0.js"></script>
    <script>
        function doSearch() {
            $.getJSON("./service/selectProduct.php", $("#f").serializeArray(), (result) => {
                console.log(result);
                if (result.length) {
                    for (let i = 0; i < result.length; i++) {
                        var item = $("<div class='item'></div>");
                        item.html(`
                    <div class="img">
                        <img src="${result[i].p_image_url}" alt="no image">
                    </div>
                    <div class="desc">
                        <div><a href="javascript:;">${result[i].p_name}</a></div>
                        <div class="ac">
                            <span class="p">${result[i].p_price}</span>
                            <a href="javascript:;" class="add">加入购物车</a>
                        </div>
                    </div>
                    `);
                        // console.log(item);
                        $("#products").append(item);
                    }
                } else {
                    var item = $("<div class='item'></div>");
                    item.html(`
                    <div class="img">
                        <img src="${result.p_image_url}" alt="no image">
                    </div>
                    <div class="desc">
                        <div><a href="javascript:;">${result.p_name}</a></div>
                        <div class="ac">
                            <span class="p">${result.p_price}</span>
                            <a href="javascript:;" class="add">加入购物车</a>
                        </div>
                    </div>
                    `);
                    console.log(item);
                    $("#products").append(item);
                }
            });
        }



        // var pageNum = 1;

        // function Page(a) {

        //     // console.log(a);
        //     if (a == "1") {
        //         pageNum = pageNum + 1;
        //     }
        //     if (a == "-1") {
        //         pageNum = pageNum - 1;
        //     }
        //     var nextNum = pageNum + 1;
        //     var preNum = pageNum - 1;
        //     // console.log(preNum);
        //     // console.log(pageNum);
        //     // console.log(nextNum);

        //     // $.getJSON("./service/selectProduct.php", $("#f").serializeArray(), (result) => {
        //     //     {

        //     //     }
        //     // });
        //     $("#page").html(
        //         `
        //             <a href="javascript:/homework/首页.html?pageNum=${preNum};" onclick="Page('-1')">上一页</a>
        //             <a href="javascript:;">${pageNum}</a>
        //             <a href="javascript:/homework/首页.html?pageNum=${nextNum};" onclick="Page('1')">下一页</a>
        //             `
        //     );
        // }
        // window.onload = function() {
        //     Page(0);
        // };
    </script>
</head>

<body>
    <div class="container">
        <div>
            <form id="f">
                <div>
                    <label>商品编号:<input type="text" name="id" ></label>
                    <label>商品名称:<input type="text" name="name" ></label>
                </div>
                <div>
                    <label>商品价格:<input type="text" name="begin" > ~ <input type="text" name="end" ></label>
                </div>
                <div>
                    <input type="button" value="search" onclick="doSearch()" />
                </div>
            </form>
        </div>
        <div class="products" id="products">

            <!-- <div class="item">
                <div class="img">
                    <img src="" alt="no image">
                </div>
                <div class="desc">
                    <div><a href="javascript:;">p_name</a></div>
                    <div class="ac">
                        <span class="p">p_price</span>
                        <a href="javascript:;" class="add">加入购物车</a>
                    </div>
                </div>
            </div> -->

        </div>

        <div class="page" id="page">
            <a href="javascript:;" onclick="Page('-1')">上一页</a>
            <a href="javascript:;">3</a>
            <a href="javascript:;" onclick="Page('1')">下一页</a>
        </div>
    </div>
</body>

</html>